{% extends "layout.html" %}

{% block title %}Création d'une ligne mobile{% endblock %}

{% block content %}
<script type="text/javascript"> if (window.jQuery == undefined) document.write( unescape('%3Cscript src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"%3E%3C/script%3E') );</script>
<script src="js/vendor/jquery.validate.js"></script>
<script src="js/vendor/datepicker/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="js/vendor/datepicker/css/datepicker.css">
<script>
//if (jQuery) { alert("jQuery loaded"); }
$.validator.setDefaults({
	submitHandler: function() { 
	//alert("envoyé!");
	submit();
	}
});
jQuery.validator.addMethod("numero_tel", function(value, element) {
        // test du numéro
        return /^33\d\d\d\d\d\d\d\d\d$/i.test(value);
    }, 'Veuillez saisir le numéro de téléphone dans le format suivant : <i>33123456789</i>');

jQuery.validator.addMethod("format_date", function(value, element) {
        // test du numéro
	return /^\d\d?\/\d\d?\/\d\d\d\d$/i.test(value);
    }, 'Format jj/mm/aaaa');	

jQuery.validator.addMethod("alphanumerique", function(value, element) {
	return this.optional(element) || /^[a-z0-9\-\_\s]+$/i.test(value);
}, "Pas de caractères spéciaux.");	

$().ready(function() {
	
	// validation du formulaire par keyup et submit
	$("#form").validate({
		rules: {
			utilisateur: {
				required: true,
				minlength: 2,
				alphanumerique: true
			},
			numero_rio: {
				required: true,
				minlength: 12,
				maxlength: 12
			},
			msisdn: {
				required: true,
				minlength: 11,
				maxlength: 11,
				alphanumerique: true,
				numero_tel: true
			},
			date_souhaite: {
				required: true,
				minlength: 10,
				maxlength: 10,
				format_date: true
			},
			numero_imei: {
				required: true
			},
			engagement: {
				required: true
			},
			abonnement_mobile: {
				required: true
			},
			terminal_mobile: {
				required: true
			}
		},
		messages: {
			utilisateur: {
				required: "Champ obligatoire",
				minlength: "Ce champ doit contenir au moins 2 caractères",
				alphanumerique: "Pas de caractères spéciaux"
			},
			numero_rio: {
				required: "Champ obligatoire",
				minlength: "Ce champ doit contenir 12 caractères"
			},
			msisdn: {
				required: "Champ obligatoire",
				minlength: "Ce champ doit contenir 11 caractères"
			},
			date_souhaite: {
				required: "Champ obligatoire",
				minlength: "Ce champ doit contenir 10 caractères"
			},
			numero_imei: {
				required: "Champ obligatoire",
			},
			engagement: {
				required: "Champ obligatoire",
			}

		}
	});
});

$(function(){
$('#date_souhaite').datepicker({
				format: 'dd/mm/yyyy',
				weekStart: 1,
				startDate: '+3d',
    			endDate: '+2m',
				daysOfWeekDisabled: '0,6',
				language: 'fr-FR'
				
			});
});
$(function() {
	$('#abonnement_mobile').bind('change', function(ev) {
		
		var value = $(this).val();
		
		$.ajax({
		type: "GET",
		url: "ajout-ligne-mobile-options",
		data: "test=ok&id_forfait="+value+"&id={{ligneCommande.id}}&commande={{commande.id}}",
		error:function(msg){
		 alert( "Error !: " + msg );
		},
		success:function(data){
			//affiche le contenu du fichier dans le conteneur dédié
			$('#contenu_options_ajax').html(data);}
	 	});
 	});
});

{% if commande.statut == "en cours" %}
if (window.location.search.indexOf('action=modif') > -1) {
{% endif %} 
    $.ajax({
	  url: 'ajout-ligne-mobile-options',
	  data: "test=ok&id_forfait={{ligneCommande.abonnement_mobile}}&id_commande={{ligneCommande.id}}&commande={{commande.id}}",
	  success: function(data){
		$('#contenu_options_ajax').html(data);
	  },
	  error: function(){
		alert('failure');
	  }
	});	
{% if commande.statut == "en cours" %}
}
{% endif %} 

</script>
<form method="post" class="form-inline" name="form" id="form" enctype="multipart/form-data">
<fieldset>
		<legend>Création d'une ligne mobile</legend>
		<div class="row-fluid">
  		<div class="controls span3">
        <label  for="id_commande">Numéro de commande:</label>
        {% if commande.statut == "en cours" %}
		<input name="id_commande" type="text" class="uneditable-input" value="{{commande.id}}"/>
        {% else %}
			{{ligneCommande.id_commande}} 
            <input name="id_commande" type="hidden"  value="{{ligneCommande.id_commande}}"/>
		{% endif %} 
	  	</div>
		
		
</div>
</fieldset>	  

<fieldset>
			<legend>Engagement</legend>
<div class="row-fluid">
	{% if commande.statut == "en cours" or ligneCommande.duplicate == 'oui'%}            
           {% if not(session.niveauAuth=='9') %}
            <div class="span2">
            <label class="radio">
    		<input type="radio" name="engagement" id="engagement" value="0" {% if ligneCommande.engagement == "0" %}checked{% endif %}> Sans Engagement
  			</label>
            </div>
            {% endif %}
            <div class="span2">
            <label class="radio">
    		<input type="radio" name="engagement" id="engagement" value="0" {% if ligneCommande.engagement == "0" %}checked{% endif %}> 6 mois
  			</label>
            </div>
            {% if not(session.niveauAuth=='9') %}
            <div class="span2">
            <label class="radio">
    		<input type="radio" name="engagement" id="engagement" value="12" {% if ligneCommande.engagement == "12" %}checked{% endif %}> 12 mois
  			</label>
            </div>
            <div class="span2">
            <label class="radio">
    		<input type="radio" name="engagement" id="engagement" value="24" {% if ligneCommande.engagement == "24" %}checked{% endif %}> 24 mois
  			</label>
            </div>
            <div class="span2">
            <label class="radio">
    		<input type="radio" name="engagement" id="engagement" value="36" {% if ligneCommande.engagement == "36" %}checked{% endif %}> 36 mois
  			</label>
            </div>
            {% endif %}
	{% else %}
    		{% if ligneCommande.engagement == "0" %}
            Sans Engagement
            {% else %}
    		{{ligneCommande.engagement}} mois
            {% endif %}
    {% endif %}	  
</div>		  
</fieldset>
	  
	   <fieldset>
			<legend>Abonnement</legend>

		 <div class="control-group">
			<label class="control-label" for="abonnement_mobile">Offre principale {{ commande.statut}}</label>
			<div class="controls">
			{% if commande.statut == "en cours" or ligneCommande.duplicate == 'oui'%}
				<select name="abonnement_mobile" id="abonnement_mobile" >
                <option value="">Choississez...</option>
				{% for offre_mobile in offres_mobile %}
				<option value="{{offre_mobile.id}}" {% if ligneCommande.abonnement_mobile == offre_mobile.id %}selected{% endif %}>{{offre_mobile.nom}}</option>
				{% endfor %}
				</select> {% if ligneCommande.abonnement_mobile_prix %}{{ligneCommande.abonnement_mobile_prix}} € HT{% endif %}
			{% else %}
				{{ligneCommande.nom_forfait}}: {{ligneCommande.abonnement_mobile_prix}} € HT
			{% endif %}
			</div>
		  </div>			
		
        
        <div id="contenu_options_ajax">
		</div>
        </fieldset>

  <fieldset>
	<legend>Sélection du fichier :</legend>
  	<input type="file" name="monfichier" />
  </fieldset>
	
	{% if commande.statut == "en cours" or ligneCommande.duplicate == 'oui'%}
	<div class="row">
		<div class="span12">
		<div class="form-actions">
		<!--<span>Action après validation</span>
		<br/>
		  <select name="next">
          	<option value="liste-commande" select>Liste des commandes</option>
			<option value="creation-commande">Retour à la commande</option>
			<option value="liste-client">Afficher la liste des clients</option>
		  </select>
		<br/><br/> -->
		{% if ligneCommande.id is empty or ligneCommande.duplicate == 'oui' %}
			<button type="submit" class="btn btn-primary" name="action" value="create">Ajouter</button>
		{% else %}
			<button type="submit" class="btn btn-primary" name="action" value="update">Mettre à jour</button>
		{% endif %}
		</div>
		</div>
	</div>
	{% endif %}
	
</form>
{% endblock %}